<template>
  <div class="receive-card-container">
    <div class="receive-wrap">
      <div class="receive-box">
        <div class="receive-top">
          <span v-if="shop_info.avatar"
                class="shop-img"
                :style="{backgroundImage:'url('+shop_info.avatar+')'}"></span>
          <span v-else
                class="shop-img"></span>
          <span class="shop-title">{{shop_info.title}}</span>
        </div>
        <div class="receive-card-icon"></div>
        <p class="tips">已成功领取会员卡</p>
      </div>
    </div>
    <div class="receive-btn">
      <a href="javascript:;"
         class="btn-item  btn-warning"
         v-if="info.status==0"
         @click="clickActivationCard">立即激活会员卡</a>
      <a href="javascript:;"
         class="btn-item red-border-btn"
         v-else
         @click="Jump('cardDetail')">立即查看</a>
    </div>
  </div>
</template>

<script>
// import { receiveCard, activationCard } from '@/api/user/member/memberApi'
import { receiveCard } from '@/api/user/member/memberApi'
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      shop_info: {},
      info: {}
    }
  },
  methods: {
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      receiveCard().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.shop_info = resData.shop_info
          this.info = resData.info
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 点击激活会员卡,弹绑定手机号弹窗
    clickActivationCard() {
      this.$Bus.$emit('showVerifyMobilePop', { show: true, page_type: 'card' })
      /* this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      activationCard().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          // console.log('激活')
        } else {
          this.$Error(res.msg)
        }
      }) */
    }
  },
  created() {
    this.init()
  }
})
</script>
<style lang="scss">
@import "../../../../styles/mixin";
.receive-card-container {
  font-size: 32px;
  .receive-wrap {
    padding: 20px;
  }
  .receive-box {
    padding: 40px 34px;
    border-radius: 10px;
    background: #fff;
    .receive-top {
      position: relative;
    }
    .shop-img {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 80px;
      height: 80px;
      border-radius: 80px;
      background: url("https://img.wifenxiao.com/h5-wfx/images/qiboy.png") no-repeat;
      background-size: 100% 100%;
    }
    .shop-title {
      display: inline-block;
      max-width: 100%;
      height: 80px;
      padding: 0 40px 0 100px;
      line-height: 80px;
      border-radius: 80px;
      background: #f5f5f5;
      @include showEllipsis;
    }
    .receive-card-icon {
      display: block;
      width: 210px;
      height: 210px;
      margin: 70px auto 60px;
      border-radius: 50%;
      background: url("https://img.wifenxiao.com/h5-wfx/images/user/card/receive_card.png") no-repeat;
      background-color: #f9f9f9;
      background-size: 100% 100%;
    }
    .tips {
      margin-bottom: 40px;
      text-align: center;
    }
  }
  .receive-btn {
    padding: 20px 20px 50px;
    .btn-item {
      display: block;
      height: 96px;
      line-height: 96px;
      text-align: center;
      border-radius: 96px;
      font-size: 32px;
      box-sizing: border-box;
      &.btn-warning {
        color: #fff;
      }
      &.red-border-btn{
        color:#e90104;
      }
    }
  }
}
</style>